// pages/music-player/index.js
import { audioContext, playerStore } from "../../../store/index"

const playModeNames = ["order", "repeat", "random"]

Page({
  data: {
    id: 0,
    currentSong: {},
    lyricInfos: [],
    durationTime: 0,

    currentTime: 0,
    currentLyricIndex: 0,
    currentLyricText: "",

    playModeIndex: 0,
    playModeName: "order",

    isPlaying: false,

    currentPage: 0,
    contentHeight: 0,
    isMusicLyric: true,
    sliderValue: 0,
    isSliderChanging: false,
    lyricScrollTop: 0
  },
  onLoad: function (options) {
    // 获取传入的id
    const id = options.id
    // 加载播放
    // playerStore.dispatch("playMusicWithSongIdAction", { id })

    this.setData({
      id
    })
    // 根据id获取歌曲信息
    // this.getPageData(id)
    this.setupPlayerStoreListener()

    // 动态计算内容高度
    const globalData = getApp().globalData
    const screenHeight = globalData.screenHeight
    const statusBarHeight = globalData.statusBarHeight
    const navBarHeight = globalData.navBarHeight
    const contentHeight = screenHeight - statusBarHeight - navBarHeight
    const deviceRadio = globalData.deviceRadio
    this.setData({
      contentHeight,
      isMusicLyric: deviceRadio >= 2
    })
  },
  
  // ==============  事件处理  ================
  handleSwiperChange: function (event) {
    const current = event.detail.current
    this.setData({
      currentPage: current
    })
  },
  handleSliderChange: function (event) {
    // 获取slider变化的值
    const value = event.detail.value
    // 计算需要播放的currentTime
    const currentTime = this.data.durationTime * value / 100
    // 设置context播放位置的音乐
    // audioContext.pause()
    audioContext.seek(currentTime / 1000)
    // 记录最新的sliderValue，并且需要将isSliderChanging设置回false
    this.setData({
      sliderValue: value,
      isSliderChanging: false
    })
    // playerStore.dispatch("changeMusicPlayStatus")
  },
  handleSliderChanging: function (event) {
    const value = event.detail.value
    const currentTime = this.data.durationTime * value / 100
    this.setData({
      isSliderChanging: true,
      currentTime
    })
  },
  handleBackClick: function() {
    wx.navigateBack()
  },
  handleModeClick: function() {
    const playModeIndex = (this.data.playModeIndex + 1) % 3
    playerStore.setState("playModeIndex", playModeIndex)
  },
  // 播放暂停事件处理
  handlePauseClick: function() {
    playerStore.dispatch("changeMusicPlayStatus", !this.data.isPlaying)
  },

  handlePrevBtnClick: function() {
    playerStore.dispatch("changeNewMusicAction", false)
  },

  handleNextBtnClick: function() {
    playerStore.dispatch("changeNewMusicAction")
  },

  handleListClick: function() {
    wx.showToast({
      title: '功能还在完善中~~~',
      icon: 'none'
    })
  },

// =============================  数据监听  =====================================
  setupPlayerStoreListener: function() {
    // 1、监听 "currentSong", "durationTime", "lyricInfos"
    playerStore.onStates(["currentSong", "durationTime", "lyricInfos"], ({ 
      currentSong, 
      durationTime, 
      lyricInfos }) => {
      if (currentSong) this.setData({ currentSong })
      if (durationTime) this.setData({ durationTime })
      if (lyricInfos) this.setData({ lyricInfos })
    })

    // 2、监听 "currentTime", "currentLyricText", "currentLyricIndex"
    playerStore.onStates(["currentTime", "currentLyricText", "currentLyricIndex"], ({ 
      currentTime, 
      currentLyricText, 
      currentLyricIndex }) => {
        // 时间变化
        if (currentTime && !this.data.isSliderChanging) {
          const sliderValue = currentTime / this.data.durationTime * 100
          this.setData({ currentTime, sliderValue })
        }
        // 歌词变化
        if (currentLyricText) {
          this.setData({ currentLyricText })
        }
        // 歌词变化
        if (currentLyricIndex) {
          this.setData({ currentLyricIndex,  lyricScrollTop: currentLyricIndex * 35 })
        }
    })

    // 3、监听播放模式的变化
    playerStore.onStates(["playModeIndex", "isPlaying"], ({ playModeIndex, isPlaying }) => {
      if (playModeIndex !== undefined) {
        this.setData({ playModeIndex, playModeName: playModeNames[playModeIndex] })
      }
      if (isPlaying !== undefined) {
        this.setData({ isPlaying })
      }
    })
  },

  onUnload: function () {

  }
})